page {
  --td-pull-down-refresh-color: #303133;
  --td-loading-color: #303133;
  --td-loading-text-color: #303133;
  --tabs-nav-background-color: transparent;
  --tabs-bottom-bar-height: 4px;
  --tabs-line-height: 90rpx;
  --td-button-primary-bg-color: #53e18b;
  --td-button-primary-active-bg-color: #909399;
  --td-button-primary-border-color: #53e18b;
  --td-button-primary-active-border-color: #909399;
  --td-button-light-text-color: #303133;
  --td-navbar-bg-color: transparent;
  --td-search-height: 70rpx;
  --td-search-icon-font-size: 30rpx;
  --td-search-font-size: 26rpx;
  --td-search-bg-color: #fff;

  .t-search {
    min-width: 420rpx;
  }

  .van-tabs__nav--complete {
    padding-left: 0rpx !important;
  }

  .van-tab {
    padding: 0 14rpx !important;
  }

  .van-tabs__line {
    left: -16rpx;
  }

  .t-icon-location {
    line-height: 90rpx;
  }

  .van-tabs--line {
    display: flex;
    align-items: flex-start;
  }

  .t-image {
    margin: 6rpx;
  }

  .van-tabs__line {
    bottom: 4px;
  }
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px); // 关键的模糊效果
}

// 定义光球的基础样式和颜色
.c1 {
  width: 200px;
  height: 200px;
  background: rgba(7, 193, 96, 0.4); // 主题绿
  animation: move1 25s infinite alternate;
}

.c2 {
  width: 250px;
  height: 250px;
  background: rgba(74, 144, 226, 0.3); // 辅助蓝
  animation: move2 30s infinite alternate;
}

.c3 {
  width: 180px;
  height: 180px;
  background: rgba(245, 166, 35, 0.3); // 点缀黄
  animation: move3 28s infinite alternate;
}

.c4 {
  width: 220px;
  height: 220px;
  background: rgba(126, 211, 33, 0.3); // 辅助青绿
  animation: move4 22s infinite alternate;
}


/* 定义动画关键帧 */
@keyframes move1 {
  from { transform: translate(-10vw, -10vh) scale(1); }
  to { transform: translate(20vw, 30vh) scale(1.2); }
}

@keyframes move2 {
  from { transform: translate(80vw, 10vh) rotate(0deg); }
  to { transform: translate(50vw, 70vh) rotate(90deg); }
}

@keyframes move3 {
  from { transform: translate(10vw, 80vh) scale(1.2); }
  to { transform: translate(90vw, -10vh) scale(1); }
}

@keyframes move4 {
  from { transform: translate(50vw, 50vh); }
  to { transform: translate(-10vw, 60vh); }
}


.add {
  line-height: 100rpx !important;
}

.page {
  padding: 10rpx 20rpx 10rpx;

  .card {
    background: #fff;
    border-radius: 16rpx;
    margin: 0 0 20rpx;
    padding: 0 24rpx 24rpx 24rpx;
    box-shadow: 0 10px 6px -6px rgba(255, 255, 255, 0.1), 12px 0 8px -8px rgba(255, 255, 255, 0.1);

    .user-info {
      display: flex;
      align-items: center;
      padding-top: 24rpx;

      .avatar {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .user-detail {
        flex: 1;

        .user-row {
          display: flex;
          align-items: center;

          .username {
            font-size: 28rpx;
            font-weight: 500;
            color: #303133;
          }

          .tag-wrap {
            margin-left: 16rpx;

            .level-tag {
              font-size: 24rpx;
              border: none;
              padding: 0 8rpx;
              border-radius: 30rpx;
            }
          }
        }

        .time {
          color: #bcbcbc;
          font-size: 24rpx;
          margin-top: 6rpx;
          display: block;
        }
      }
    }

    .content {
      margin: 36rpx 0 42rpx 0;

      .text {
        color: #303133;
        font-size: 30rpx;

        .ct {
          vertical-align: middle;
          letter-spacing: 2rpx;
          line-height: 1.5;
        }
      }

      .imgs {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        margin-top: 20rpx;
      }
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .info {
        display: flex;
        align-items: center;
        font-size: 22rpx;
        color: #c0c4cc;
      }

      .contact-box {
        display: flex;
        align-items: center;


        .price {
          font-size: 40rpx;
          color: #ff9f18;
          font-weight: 700;
          margin-right: 20rpx;
        }
      }
    }
  }
}